use leptos::prelude::*;

/// Input Component
#[component]
#[must_use]
pub fn UiInput(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] label: Option<String>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] value: Option<String>,
    #[prop(optional)] on_input: Option<Callback<String>>,
) -> impl IntoView {
    let (value, set_value) = signal(value.unwrap_or_default());

    let handle_input = move |ev| {
        let val = event_target_value(&ev);
        set_value.set(val.clone());
        if let Some(cb) = &on_input {
            cb.run(val);
        }
    };

    // 使用自定义的 r2mo-input 类
    let base = "r2mo-input";
    let class = class.map_or_else(|| base.to_string(), |c| format!("{base} {c}"));

    view! {
        <div class="mb-3">
            {label.map(|l| view! { <label class="block text-sm font-medium text-text-secondary mb-1">{l}</label> })}
            <input
                type="text"
                class=class
                placeholder=placeholder.unwrap_or_default()
                prop:value=value
                on:input=handle_input
            />
        </div>
    }
}
